<template>
  <div class="css-style-editor-item">
    <ColorPicker
      v-if="['color', 'backgroundColor', 'borderColor'].includes(cssKey)"
      v-model:value="curValue"
      show-alpha
    />
    <Range
      v-else-if="['fontSize', 'maxFontSize', 'minFontSize'].includes(cssKey)"
      v-model:value="curValue"
      :min="C.fontSizeMin"
      :max="C.fontSizeMax"
      type="input"
    />
    <el-select
      v-else-if="cssKey==='textAlign'"
      v-model="curValue"
      size="default"
    >
      <el-option
        :label="$demoi18n('option.align.left')"
        value="left"
      ></el-option>
      <el-option
        :label="$demoi18n('option.align.center')"
        value="center"
      ></el-option>
      <el-option
        :label="$demoi18n('option.align.right')"
        value="right"
      ></el-option>
    </el-select>

    <el-select
      v-else-if="cssKey==='fontWeight'"
      v-model="curValue"
      size="default"
    >
      <el-option v-for="(n, i) in Options.fontWeightOptions" :key="i" :label="n.label" :value="n.value"></el-option>
    </el-select>

    <Range
      v-else-if="cssKey==='opacity'"
      v-model:value="curValue"
      :min="0"
      :max="1"
      :step="0.1"
      :precision="1"
      type="input"
    />

    <IconEditor
      v-else-if="cssKey==='backgroundImage'"
      v-model:value="curValue"
      :icon="curValue"
      mode="imageUploadNoStyle"
      @save="saveBgImage($event)"
      @delete="deleteBgImage($event)"
    />

    <ValueInputer
      v-else-if="cssKey==='backgroundSize'"
      v-model:value="curValue"
      valueType="Input"
      :enum-values="Options.backgroundSizeOptions"
    />

    <!-- 代码检视： 全等前后需要有空格 -->
    <ValueInputer
      v-else-if="cssKey==='backgroundRepeat'"
      v-model:value="curValue"
      valueType="Input"
      :enum-values="Options.backgroundRepeatOptions"
    />

    <ValueInputer
      v-else-if="cssKey==='borderStyle'"
      v-model:value="curValue"
      valueType="Input"
      :enum-values="Options.borderStyleOptions"
    />

    <el-select
      v-else-if="cssKey==='fontFamily'"
      v-model="curValue"
      size="default"
    >
      <el-option v-for="(n, i) in Options.fontFamilyOptions" :key="i" :label="n.label" :value="n.value"></el-option>
    </el-select>

    <Range
      v-else-if="['width','height', 'lineHeight', 'borderRadius','borderWidth'].includes(cssKey)"
      v-model:value="curValue"
      :min="C.numberMin"
      :max="C.numberMax"
      type="input"
    />

    <Range
      v-else-if="['paddingTop','paddingBottom','paddingLeft','paddingRight'].includes(cssKey)"
      v-model:value="curValue"
      :min="C.numberMinNeg"
      :max="C.numberMax"
      type="input"
    />

    <Range
      v-else-if="['marginTop','marginBottom','marginLeft','marginRight'].includes(cssKey)"
      v-model:value="curValue"
      :min="C.numberMinNeg"
      :max="C.numberMax"
      type="input"
    />

    <el-select
      v-else-if="cssKey==='textDecoration'"
      v-model="curValue"
      size="default"
    >
      <el-option
        label="none"
        value="none"
      ></el-option>
      <el-option
        label="underline"
        value="underline"
      ></el-option>
      <el-option
        label="line-through"
        value="line-through"
      ></el-option>
    </el-select>

    <el-select
      v-else-if="cssKey==='display'"
      v-model="curValue"
      size="default"
    >
      <el-option v-for="(n, i) in Options.displayOptions" :key="i" :label="n.label" :value="n.value"></el-option>
    </el-select>

    <el-select
      v-else-if="cssKey==='flexDirection'"
      v-model="curValue"
      size="default"
    >
      <el-option v-for="(n, i) in Options.flexDirections" :key="i" :label="n.label" :value="n.value"></el-option>
    </el-select>
  </div>
</template>
<script>
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import Range from '@/components/common/range/range.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import rulesConst from '@/rules/rules_constant.js';
import * as Options from '@/components/common/options/options.js';
import cssDefault from './cssDefault.js';
import { isObject, clone } from '@/utils/util.js';

export default {
  components: { Range, ColorPicker, IconEditor, ValueInputer },
  props: {
    cssKey: String,
    modelValue: [String, Number, Object],
  },
  emits: ['update:modelValue'],
  data() {
    return {
      C: rulesConst, // 检视意见：描述注释规则常量
      Options,
      curValue: this.modelValue,
    };
  },
  watch: {
    cssKey(key) {
      this.curValue = cssDefault[this.cssKey].value;
      if (isObject(this.curValue)) { // backgroundImage是对象
        this.curValue = clone(this.curValue);
      }
    },
    curValue(val) {
      this.$emit('update:modelValue', val);
    },
  },
  created() {
    this.initCurValue();
  },
  mounted() {}, // 检视意见：删除多余函数
  methods: {
    initCurValue() {
      if (!this.curValue) {
        this.curValue = cssDefault[this.cssKey].value;
        if (isObject(this.curValue)) { // backgroundImage是对象
          this.curValue = clone(this.curValue);
        }
      }
    },
    saveBgImage(iconConf) {
      this.curValue = iconConf;
    },
    deleteBgImage(iconConf) {
      this.curValue = {};
    },
  },
};
</script>
<!-- 检视意见，空白样式 -->
<style lang="less" scoped>
</style>
